Day 3 : 為專案加上說明書 - manifest.json 基本設定 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 3

佛心分享-SideProject30

從零開始改善工作之 Chrome Extension: MR 通知文字小工具系列第 3 篇

Day 3 : 為專案加上說明書 - manifest.json 基本設定

17th鐵人賽

ouo

2025-09-17 10:48:23

66 瀏覽

分享至

今天我們要把建立好的專案進化成 Chrome 可以辨識的 extension！
因此我們就會需要 manifest.json

什麼是 manifest.json ?

有接觸過 PWA 或 APP 可能對於這個檔案比較熟悉，manifest.json 類似一個程式的說明書，用來告訴平台這個程式的一些必要或額外的資訊。

Chrome Extension 的專案架構介紹

可以從 Google 提供的 Chrome Extension 的教學示範 Hello World 擴充功能中得知，一個最小可運作的 Chrome Extension 其實只要：

my_extension/
 ├─ manifest.json
 └─ hello.html (extension 顯示的畫面)

就可以至 chrome://extensions 載入使用了

而隨著需求的增加，架構會漸漸新增不同的檔案，例如：

和開啟的網頁互動的 JS 腳本 (ex: content.js)
一些運行在瀏覽器背景負責處理事件的 JS 腳本 (ex: background.js)
Javascript 框架 (ex: vue)
CSS 框架(ex: tailwind)
等等。

新增 manifest.json

新增 manifest.json 很簡單，只要在昨天建立的專案的根目錄新增一個檔案，並命名為 manifest.json 就可以囉！
我們這次使用 Vite + Vue + Tailwind 所以架構就會是

mr-review-message/
 ├─ manifest.json
 ├─ .vscode
 ├─ node_module
 ├─ public
 ├─ src
 ├─ .gitignore
 ├─ index.html
 ├─ package-lock.json
 ├─ package.json
 ├─ README.md
 └─ vite.config.js

manifest.json 的內容

接下來就是重點了！
manifest.json 要寫什麼，才可以讓 Chrome Extension 了解這個專案是用來作為 Extension 使用的呢？
根據 Chrome Extension 文件說明，我們可以整理出一些我們需要使用到的參數：

key	說明
manifest_version	目前 Chrome 官方唯一支援的值為 3。指定擴充功能使用的資訊清單檔案格式版本。
name	Extension 的名字，顯示在 Chrome 線上應用程式商店、安裝對話方塊和使用者的 Chrome Extension (chrome://extensions) 中
version	Extension 的版本，用於識別 Extension 版本號碼的字串
description	Extension 說明，顯示在 Chrome 線上應用程式商店和使用者的 Extension 管理頁面中
icons	一或多個尺寸代表 Extension 的圖示。通常應使用 PNG 格式，因為 PNG 是最能支援透明效果，但可以是 Blink 支援的任何光柵格式，包括 BMP、GIF、ICO 和 JPEG。128(安裝期間及 Chrome 線上應用程式商店使用)、48(用於 Extensions 管理頁面)、16(Extensions 管理頁面的網站小圖示)
permissions	可使用特定的 Chrome Extension API。這邊會需要使用 storage(可保存使用者資料和狀態)、tabs(與瀏覽器的分頁系統互動)
background	處理 Extension 事件的 Service Worker，做為事件處理常式(之後會再介紹)
action	定義 Google 工具列中 Extension 圖示的外觀和行為。這邊設定使用者點選時，Extension 會顯示彈出式視窗。
content_scripts	指定使用者開啟特定網頁時要使用的 JavaScript 或 CSS 檔案(之後會再介紹)

以下是參考範例：

{
  "manifest_version": 3,
  "name": "MR 通知文字小工具",
  "version": "1.0.0",
  "description": "快速產生 Merge Requesr 文字範本",
  "icons": { 
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "storage", 
    "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "matches": ["https://gitlab.com/*/merge_requests/*"],
      "js": ["content.js"]
    }
  ]
}

這樣，我們的 Extension 就有了一個基本的骨架。接下來的日子，我們會逐一補齊這些零件，讓它變成一個真正好用的小工具。